<template>
  <view class="wrapper_full person">
    <view class="panel1">
      <view class="head_pic">
        <image :src="defaultAvatar"></image>
      </view>
    </view>
    <view class="wrapper">
      <view class="panel2 panel">
        <view
          class="li privacy"
          @click="global.toPage('/pages/person/privacy')"
        >
          <view class="ico"></view>
          <text class="text">隐私协议</text>
        </view>
        <view
          class="li suggest"
          @click="global.toPage('/pages/person/suggest')"
        >
          <view class="ico"></view>
          <text class="text">投诉建议</text>
        </view>
        <view class="li cache" @click="clearCache">
          <view class="ico"></view>
          <text class="text">清空缓存</text>
        </view>
      </view>
    </view>
    <view class="pub_ad_banner">
      <!-- #ifdef MP-TOUTIAO -->
      <ad
        :unit-id="adDouyinPersonBottom"
        :ad-intervals="30"
        :fixed="false"
        type="banner"
        scale="100"
      />
      <!-- #endif -->
      <!-- #ifdef MP-KUAISHOU -->
      <ad :type="100011054" :unit-id="adKuaishouPersonBottom"></ad>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import {
  adUnitIdDouyinPersonBottom,
  adUnitIdKuaishouPersonBottom,
} from "@/common/ad";
export default {
  data() {
    return {
      adDouyinPersonBottom: adUnitIdDouyinPersonBottom,
      adKuaishouPersonBottom: adUnitIdKuaishouPersonBottom,
      defaultAvatar: require("@/static/img/default_avatar.jpg"),
      userInfo: {
        id: null,
        nickName: "",
        thumb: null,
        city: "",
        country: "",
        gender: 0,
        unionId: null,
      },
    };
  },
  onShow() {},
  computed: {},
  methods: {
    clearCache() {
      uni.showToast({
        title: "清除成功",
        duration: 2000,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.person {
  .panel {
    text-align: left;
    background: #fff;
    box-shadow: 2px 2px 6px 4px rgba(0, 0, 0, 0.2);
    padding: 20rpx 20rpx;
    .li {
      float: left;
      width: 24.25%;
      margin-right: 1%;
      flex-shrink: 0;
      padding: 0;
      background: transparent;
      .ico {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        height: 100rpx;
        width: 100rpx;
        text-align: center;
        // background: $pub_color;
        border-radius: 50%;
        color: #5e5e5e;
        i {
          display: block;
          margin: 0 auto;
          font-size: 60rpx;
        }
      }
      &:nth-of-type(4n) {
        margin-right: 0;
      }
      .text {
        display: block;
        text-align: center;
        font-size: 30rpx;
        margin-top: 10rpx;
        line-height: 180%;
      }
      &:after {
        display: none;
      }
    }
    .faq {
      .ico {
        background: #db0000 url("@/static/img/faq_ico.png") no-repeat center
          center;
        background-size: 80% 80%;
      }
    }
    .suggest {
      .ico {
        background: #db0000 url("@/static/img/suggest_ico.png") no-repeat center
          center;
        background-size: 50% 50%;
      }
    }
    .contact {
      .ico {
        background: #db0000 url("@/static/img/contact_ico.png") no-repeat center
          center;
        background-size: 50% 50%;
      }
    }
    .collect {
      .ico {
        background: #db0000 url("@/static/img/collect_ico.png") no-repeat center
          center;
        background-size: 50% 50%;
      }
    }
    .cache {
      .ico {
        background: #db0000 url("@/static/img/collect_ico.png") no-repeat center
          center;
        background-size: 50% 50%;
      }
    }
    .suggest {
      .ico {
        background: #db0000 url("@/static/img/suggest_ico.png") no-repeat center
          center;
        background-size: 50% 50%;
      }
    }
    .privacy {
      .ico {
        background: #db0000 url("@/static/img/privacy_ico.png") no-repeat center
          center;
        background-size: 50% 50%;
      }
    }
    &:after {
      clear: both;
      display: block;
      content: "";
    }
  }
  .panel1 {
    background: #db0000;
    padding: 40rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .head_pic {
      border: 2rpx solid #dcdcdc;
      width: 140rpx;
      height: 140rpx;
      overflow: hidden;
      border-radius: 50%;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .info {
      float: left;
      margin-left: 40rpx;
      i {
        background: #fff;
        padding: 6rpx 14rpx;
        color: #666;
        font-style: normal;
        border-radius: 4px;
        display: inline-block;
        margin-left: 10rpx;
        font-size: 28rpx;
      }
      span {
        display: block;
      }
      text {
        color: #fff;
        display: block;
        .el-button {
          display: inline-block;
          margin-left: 20rpx;
        }
      }
    }
    .bindPhone {
      // color: $pub_color;
      margin-top: 10rpx;
      padding: 6rpx 20rpx;
      line-height: 160%;
      font-size: 36rpx;
      background: #fff;
      border-radius: 10rpx;
      text-align: center;
      display: block;
    }
    .login_btn {
      // color: $pub_color;
      padding: 6rpx 20rpx;
      line-height: 160%;
      font-size: 36rpx;
      background: #fff;
      border-radius: 10rpx;
      text-align: center;
      display: block;
    }
    &:after {
      clear: both;
      display: block;
      content: "";
    }
  }
  .panel2 {
    padding-left: 2%;
    padding-right: 2%;
    margin-bottom: 40rpx;
    .li {
      .ico {
        .icon-shoucang {
          font-size: 50rpx;
        }
      }
    }
  }
  .panel3 {
    padding-left: 2%;
    padding-right: 2%;
    margin-bottom: 40rpx;
    .li {
      .ico {
        .icon-tousujianyi {
          font-size: 44rpx;
        }
        .icon-wenti- {
          font-size: 50rpx;
        }
      }
    }
  }
}
</style>
